<template>
	<div class="yh-footnav">
		<em class="yh-ler"></em>
		<span class="yh-shu">1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
		<span>5</span>
		<span>6</span>
		<span>7</span>
		<span>8</span>
		<span>9</span>
		<span>10</span>
		<em class="yh-rer"></em>
		<input type="number" class="yh-inp" min="1" max="10"/>
		<b class="yh-ye">/10</b>
		<button class="yh-tiao">跳转</button>
	</div>
</template>

<script>
	export default {
		components: {

		},
		methods: {
			page: function() {
				var index = 0;
				$(".yh-rer").click(function(){
					index++;
					if(index==10){
						index=0;
					}
					$(".yh-footnav span").eq(index).addClass("yh-shu").siblings("span").removeClass("yh-shu");
				});
				$(".yh-ler").click(function(){
					index--;
					if(index==-1){
						index=9;
					}
					$(".yh-footnav span").eq(index).addClass("yh-shu").siblings("span").removeClass("yh-shu");
				});
				$(".yh-tiao").click(function(){
					index=$(".yh-inp").val()-1;
					$(".yh-footnav span").eq(index).addClass("yh-shu").siblings("span").removeClass("yh-shu");
				});
			}
		},
		mounted: function() {
			this.page();
		}

	}
</script>

<style scoped="scoped">
	.yh-footnav {
		width: 800px;
		height: 30px;
		margin: 0 auto;
		font-size: 22px;
		color: #666;
		cursor: pointer;
		user-select: none;
	}
	
	.yh-footnav>span {
		padding: 0 15px;
	}
	
	.yh-ler,
	.yh-rer {
		display: inline-block;
		width: 50px;
		height: 28px;
		text-align: center;
		margin: -8px 0;
	}
	
	.yh-ler {
		background: url(../../assets/img/geren/right.png) no-repeat 15px 3px;
		background-size: 30% 80%;
		background-color: #DCDCDC;
	}
	
	.yh-rer {
		background: url(../../assets/img/geren/erduo1.png) no-repeat 15px 3px;
		background-size: 30% 80%;
		background-color: #DCDCDC;
	}
	
	.yh-inp {
		border: 1px solid #d2d2d2;
		width: 50px;
		text-align: center;
	}
	
	.yh-shu {
		width: 50px;
		background: #498E3D;
		text-align: center;
		color: #FFFFFF;
	}
	
	.yh-tiao {
		width: 50px;
		border: none;
		background: #F08200;
		color: #FFFFFF;
		font-size: 16px;
		text-align: center;
		font-weight: 200;
	}
</style>